<template>
  <div class="promote-content-page">
    <div class="top-box">
      <promote-header :activeName="activeName" :activeTitle="activeTitle"></promote-header>
    </div>
    <div class="bottom-box">
      <el-card shadow="always">
        <div slot="header" class="clearfix">
          <line-header title="关键词推广列表"></line-header>
        </div>
        <div class="card-body-box">
          <promote-search
            :activeName="activeName"
            @search="hkLoadList"
          ></promote-search>
          <promote-table
            :activeName="activeName"
            :data="tableData"
            :pageSize = "pageSize"
            :currentPage = "currentPage"
          ></promote-table>
          <div class="pagination-box">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[20, 50, 100]"
              :page-size="20"
              :total="total"
              layout=" prev, pager, next,sizes,jumper"
            >
            </el-pagination>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import promoteHeader from "./promote-header";
import promoteSearch from "./promote-search";
import PromoteTable from "./promote-table.vue";
import lineHeader from "@/components/line-header/index";
import {trace} from "../../utils/trace"

export default {
  components: {
    promoteHeader,
    promoteSearch,
    PromoteTable,
    lineHeader
  },
  props: {
    activeName: "",
    activeTitle: "",
  },
  data() {
    return {
      pageSize:20,
      currentPage: 1,
      total: 0,
      tableData: [
        {
          id: "00001",
          key: "智火",
          rank: "3",
          name: "智火官网",
          url: "www.zhihuo.com",
          keyStatus: "1",
          createTime: "2017-10-31  23:12:00",
          runTime: "2017-10-31  23:12:00"
        },

      ]
    };
  },
  watch: {

  },
  computed: {},
  methods: {
    hkLoadList(item = {}) {
      if(item.keyStatus||item.searchKey){
        let kind = 2;
        if(this.activeName=="one"){
          kind = 1
        }
        let page = this.currentPage;
        let count = this.pageSize;
        let status = item.keyStatus||8789324728947;
        if(status==0) status = 8789324728947;
        let word = item.searchKey||"";
        if(word.length<1) word = undefined;

        this.$store.dispatch('promote/seoQuery', {kind,page,count,status,word}).then((data) => {
          trace("获取推广列表---data",data);
          this.tableData = data.data;
          this.total = data.total;
        }).catch((err) => {
          trace("err=",err)
        })
      }else {
        this.getList();
      }


    },
    handleSizeChange(value) {
      this.pageSize = value
      this.getList();
    },
    handleCurrentChange(value) {
      this.currentPage = value
      this.getList();
    },
    getList(){
      let kind = 2;
      if(this.activeName=="one"){
        kind = 1
      }
      let page = this.currentPage;
      let count = this.pageSize;
      let status = 8789324728947;

      this.$store.dispatch('promote/seoQuery', {kind,page,count,status}).then((data) => {
        trace("获取推广列表---data",data);
        this.tableData = data.data;
        this.total = data.total;
      }).catch((err) => {
        trace("err=",err)
      })
    },
  },
  created() {
    this.getList();
  },
  mounted() {
    this.$bus.on("upList_promote", () => {
      this.getList();
    });
  },
  beforeDestroy() {
    this.$bus.off("upList_promote");
  }
};
</script>
<style lang="scss" scoped>
.promote-content-page {
  height: 100%;
  padding: 20px 36px 50px 36px;
  background-color: #ecf0f3;


  .bottom-box {
    margin-top: 30px;
  }
  .pagination-box {
    margin: 15px 0;
    text-align: right;
  }
}
</style>
